<template>
  <div class="groupQueryPerson">
    <div class="gp-top">
      <div class="top-title">
        <div class="t-flag"></div>
        <div class="t-text">查询</div>
      </div>
      <div class="top-search">
        <div class="s-box">
          <div class="b-account">
            <span class="a-title">账号:</span>
            <input placeholder="请输入账号" type="text" maxlength="11" v-model="account"></input>
            <el-button class="a-search" @click="handleSearch()">搜索</el-button>
          </div>
        </div>
      </div>
    </div>
   <div class="group-content">
     <div class="bottom-title">
       <div class="t-flag"></div>
       <div class="t-text">你要查询的会员是:</div>
     </div>
     <div class="bottom-content-chaPerson" v-if="groupLeaderList.length!==0">
       <process-tree :groupList=" groupLeaderList" ></process-tree>
     </div>
   </div>
  </div>
</template>

<script>
  import ProcessTree from '@/components/GroupProcessTree'

  export default {
    name: "GroupQueryPerson",
    data() {
      return {
        groupLeaderList: [],
        account:''
      }
    },
    components: {
      ProcessTree
    },
    mounted() {
       this.getGroupLeaderList()
    },
    methods: {
       getGroupLeaderList(){
         const loading=this.$loading({
           lock: true,
           text: 'Loading',
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.7)'
         })
         let data={
           mobile:this.$route.query.account
         }
         this.$api.GroupLeaderSearch(data).then((res)=>{
              if(res.data.list){
                this.groupLeaderList=[]
                this.groupLeaderList.push(res.data.list)
              }else{
                this.$message.error(res.data.info)
              }
              loading.close()
            },(err)=>{
               this.$message.error(err.msg)
            })
            setTimeout(()=>{
              loading.close()
            },10000)
       },
      handleSearch(){
        let data={
          mobile:''
        }
        if(this.account && this.account.length==11){
          data.mobile=this.account
        }else{
          this.$message.error("请输入正确的账号")
          return
        }
        const loading=this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$api.GroupLeaderSearch(data).then((res)=>{
          this.groupLeaderList=[]
          if(res.data.list){
            this.groupLeaderList.push(res.data.list)
          }else{
            this.$message.error(res.data.info)
          }
          loading.close()
        },(err)=>{
          this.$message.error(err.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      }
    }
  }
</script>

<style scoped lang="less">
  .groupQueryPerson {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    .gp-top{
      width: 100%;
      background-color: #ffffff;
      .top-title{
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: solid 1px #EEEEEE;
        .t-flag{
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }
        .t-text{
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }

      }
      .top-search{
        box-sizing: border-box;
        padding: 20px 40px 20px 40px;
        .s-box{
          width: 100%;
          background-color: #F8F8F8;
          .b-account{
            text-align: left;
            position: relative;
            padding: 7px 10px;
            border-radius: 5px;
            box-sizing: border-box;
            .a-title{
              font-size: 14px;
              color: #323232;
            }
            input{
              width: 200px;
              height: 30px;
              font-size: 14px;
              padding: 5px 10px;
              box-sizing: border-box;
              border: solid 1px #DFE2E7;
              border-radius: 3px;
            }
            .a-search{
              margin-left: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
            .a-export{
              position: absolute;
              right: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
          }
        }
      }
    }
    .group-content{
      /*height: 100%;*/
      margin-top: 10px;
      background-color: #ffffff;
      .bottom-title {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;

        .t-flag {
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }

        .t-text {
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }
      .bottom-content-chaPerson{
        padding: 20px 40px 40px 30px;
        text-align: left;

      }
    }

  }
</style>
